<template>
  <div class="search-panel-wrapper">
    <div class="header">
      【查询条件】
    </div>
    <div class="main">
      <div class="row">
        <span class="info-key">部门名称：</span>
        <el-select
          @change="updateSearchCondition"
          size="mini"
          v-model="department"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="row">
        <span class="info-key">员工姓名：</span>
        <el-input
          @input="updateSearchCondition"
          placeholder="输入员工姓名"
          size="mini"
          class="input"
          v-model="name"
        ></el-input>
      </div>

      <div class="row operator">
        <el-button
          type="primary"
          @click="handleSearch"
          size="small"
          round
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="handleReset"
          size="small"
          round
          icon="el-icon-refresh-left"
          >重置</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import props from './props';
import data from './data';
import lifecircle from './lifecircle';
import methods from './methods';
export default {
  name: 'SearchPanel',
  props,
  data,
  ...lifecircle,
  methods
};
</script>

<style scoped lang="less">
.search-panel-wrapper {
  width: 400px;
  height: 180px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;

  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  box-shadow: 0 2px 10px #888888;

  .header {
    box-sizing: border-box;
    padding: 0 5px;
    width: 100%;
    height: 25px;

    background-color: #538cc7;
    color: white;
    font-size: 14px;
    line-height: 25px;
  }

  .main {
    width: 100%;
    flex-grow: 1;

    .row {
      margin: 5px 5% 0 5%;
      width: 90%;
      display: flex;
      align-items: center;
      .info-key {
        color: #333;
        font-size: 14px;
      }
      .input {
        width: 57%;
      }
    }

    .operator {
      margin-top: 30px;
    }
  }
}
</style>
